<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="index.css" />
<title>Mon moteur de Blog</title>


<!--  boostrap css -->
<link
	href="http://localhost:8080/blogenginesd/gabarit/css/bootstrap.min.css"
	rel="stylesheet" media="screen">
<link
	href="http://localhost:8080/blogenginesd/gabarit/css/bootstrap-responsive.css"
	rel="stylesheet">

<!--  // boostrap end -->

</head>

<body>

<!--  boostrap css -->

<script src="http://code.jquery.com/jquery.js"></script>
	<script
		src="http://localhost:8080/blogenginesd/gabarit/js/bootstrap.min.js"></script>

<!--  // boostrap end -->


<div id="container">
<!--  ============================================================================= -->	
<div id="entete-blog">
		<div id="gauche">
			<img src="tableau2.png" alt="Apprentissage Language Objet"/>
		</div>
		<div id="droite">
			<header id="langue">
				<span>Changer de langue : </span>
				<a href="">Français</a>
				<span> - </span>
				<a href="">Anglais</a>
			</header>
			<h1>Le Blog de l'apprentissage JEE</h1>
			<div id="form-couleur">
				<form action="index.html">
					<input type ="submit" class="btn boutons" value="modifier votre style"/>
					<br/>
					<input type="radio" name="couleur-blog" value="rouge"/><label> rouge </label>
					<input type="radio" name="couleur-blog" value="vert"/><label> vert </label>
					<input type="radio" name="couleur-blog" value="bleu"/><label>  bleu </label>
				</form>
			</div>
		</div>
	</div> <!-- id entete-blogg --> 
<!--  ============================================================================= -->	
	<div id="connection">
		<form action="index.html">
			<h2>Identification : </h2>
			<input type="text" size=15 name="Login"/>
			<input type="password" size=15 name="Mdp"/>
			<br/><input type ="submit" class="boutons" value="OK"/><br/>
			<a href="">S'enregistrer</a>
			<span> / </span>
			<a href="">Mdp perdu ?</a>
		</form>
	</div>
<!--  ============================================================================= -->	
<div id="contenu">
	<section id="liste-articles">
		<article class="article" id="A-1">
			<form action="index.html">
				<h2 class="Titre-article">Titre de L'article 01</h2>
				<div class="Cat-article">
					<label>Catégorie : </label>
					<span>Sport</span>
				</div>
				<pre class="contenu-article">Contenu de l'article 1
				</pre>
				<div class="date-aut_comm">
				<span>Date de publication 1</span>
				<span> / </span>
				<span>Auteur 1</span>
				<span> / </span>
				<a href =""> Voir les commentaires (n1)</a>
				</div>
				<input type="submit" value="Commenter cet article"/>
			</form>
		</article>

		<article class="article" id="A-2">
			<form action="index.html">
				<h2 class="Titre-article">Titre de L'article 02</h2>
				<div class="Cat-article">
					<label>Catégorie : </label>
					<span>Sport</span>
				</div>
				<pre class="contenu-article">Contenu de l'article 2
				</pre>
				<div class="date-aut_comm">
				<span>Date de publication 2</span>
				<span> / </span>
				<span>Auteur 2</span>
				<span> / </span>
				<a href =""> Voir les commentaires (n2)</a>
				</div>
				<i class="icon-circle-arrow-right"></i><input class="btn-success" type="submit" value="Commenter cet article"/>
			</form>
		</article>
		<article class="article" id="A-2">
			<form action="index.html">
				<h2 class="Titre-article">Titre de L'article 02</h2>
				<div class="Cat-article">
					<label>Catégorie : </label>
					<span>Sport</span>
				</div>
				<pre class="contenu-article">Contenu de l'article 2
				</pre>
				<div class="date-aut_comm">
				<span>Date de publication 2</span>
				<span> / </span>
				<span>Auteur 2</span>
				<span> / </span>
				<a href =""> Voir les commentaires (n2)</a>
				</div>
				<input type="submit" value="Commenter cet article"/>
			</form>
		</article>
		<article class="article" id="A-2">
			<form action="index.html">
				<h2 class="Titre-article">Titre de L'article 02</h2>
				<div class="Cat-article">
					<label>Catégorie : </label>
					<span>Sport</span>
				</div>
				<pre class="contenu-article">Contenu de l'article 2
				</pre>
				<div class="date-aut_comm">
				<span>Date de publication 2</span>
				<span> / </span>
				<span>Auteur 2</span>
				<span> / </span>
				<a href =""> Voir les commentaires (n2)</a>
				</div>
				<input type="submit" value="Commenter cet article"/>
			</form>
		</article>
		<article class="article" id="A-2">
			<form action="index.html">
				<h2 class="Titre-article">Titre de L'article 02</h2>
				<div class="Cat-article">
					<label>Catégorie : </label>
					<span>Sport</span>
				</div>
				<pre class="contenu-article">Contenu de l'article 2
				</pre>
				<div class="date-aut_comm">
				<span>Date de publication 2</span>
				<span> / </span>
				<span>Auteur 2</span>
				<span> / </span>
				<a href =""> Voir les commentaires (n2)</a>
				</div>
				<input type="submit" value="Commenter cet article"/>
			</form>
		</article>
	</section>
<!--  ============================================================================= -->	
	<aside id="listes">
<!--  ............................................................................. -->	
		<div class="une-liste">
			<h2>Liste des n derniers articles publiés</h2>
			<ul id="liste-derniers-art">
				<li class="element-liste"><a href="">Article 1</a></li>
				<li class="element-liste"><a href="">Article 2</a></li>
				<li class="element-liste"><a href="">Article 3</a></li>
				<li class="element-liste"><a href="">Article 4</a></li>
				<li class="element-liste"><a href="">Article 5</a></li>
			</ul>
		</div>
<!--  ............................................................................. -->	
		<div class="une-liste">
			<h2>Liste des catégories du blog</h2>
			<ul id="liste-categories">
				<li class="element-liste"><a href="">Sport</a></li>
				<li class="element-liste"><a href="">Actualités</a></li>
				<li class="element-liste"><a href="">Littérature</a></li>
				<li class="element-liste"><a href="">Jeux</a></li>
				<li class="element-liste"><a href="">Autres</a></li>
			</ul>
		</div>
<!--  ............................................................................. -->	
		<div class="une-liste">
			<h2>Liste des liens amis</h2>
			<ul id="liste-liens">
				<li class="element-liste"><a href="">Site 1</a></li>
				<li class="element-liste"><a href="">Site 2</a></li>
				<li class="element-liste"><a href="">Site 3</a></li>
				<li class="element-liste"><a href="">Site 4</a></li>
				<li class="element-liste"><a href="">Site 5</a></li>
			</ul>
		</div>
<!--  ............................................................................. -->	
	</aside>
<!--  ============================================================================= -->	
</div>  <!-- id contenu -->
	<footer id="copyright">
		<h4>Copyright Syntheses 2013 - Hébergement : Google project - Mentions Légales</h4>
	</footer>
<!--  ============================================================================= -->	
</div>  <!-- id container -->
</body>
</html>